<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <header th:replace="header::html"></header>
    </head>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
                <button class="layui-btn layui-btn-sm" onclick="xadmin.open('添加用户', '/user/add')">添加用户</button>
            </div>
        </script>

        <div class="layui-fluid">
            <table class="layui-hide" id="demo" lay-filter="test"></table>
        </div> 
    </body>
    <script>
      layui.use(['table'], function(){
          var table = layui.table;
          //执行一个 table 实例
          table.render({
              elem: '#demo'
              ,height: 420
              ,url: '/user/list' //数据接口
              ,title: '用户表'
              ,page: true //开启分页
              ,toolbar: '#toolbarDemo'  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
              ,totalRow: true //开启合计行
              ,cols: [
                  [ //表头
                  {type: 'checkbox', fixed: 'left'}
                  ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
                  ,{field: 'username', title: '用户名', width:80}
                      ,{field: 'email', title: '邮箱'}
                      ,{field: 'phone', title: '手机'}
                      ,{field: 'sex', title: '性别',templet:function (d) { if(d.sex == 1){
                          return '男'
                      }else{
                          return '女'
                      } }}
                  ,{field: 'telephone', title: '电话'}
                  ,{field: 'birthday', title: '生日'}
                  ,{field: 'status', title: '状态', width:80, templet:function (d) { if(d.status == 1){
                      return '启动'
                      }else{
                      return'禁用'
                      } }}
                      ,{field: 'createTime', title: '创建时间'}
                      ,{field: 'updateTime', title: '更新时间'}
                  ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
              ]
              ]
          });
      });
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
</html>